<template>
  <div class="login-user-ban-box overHideCon-1" v-loading="loading" v-show="totalUser || loginUser">
    <div>{{ $t('department.label.label1') }}<span class="mar-l-8">{{ totalUser }}</span></div>
    <div class="mar-l-16 mar-r-16">|</div>
    <div class="flex-x">{{ $t('department.label.label2') }}<span class="mar-l-8">{{ loginUser }}</span></div>
    <div class="flex-x mar-l-16 cur-point color-primary" v-show="loginUser" @click="showDialog = true"><i class="iconfont icon-tongzhiweixuanzhong font-12-i mar-r-8"></i>{{ $t('common.base.remind') }}</div>

    <base-modal
      :show.sync="showDialog"
      class="add-dialog-container service_body" width="480px"
      :title="$t('department.label.label3')"
    >
        {{ $t('department.label.label4') }}
      <span slot="footer" class="dialog-footer">
        <el-button type="plain-third" @click="showDialog = false">{{$t('common.base.cancel')}}</el-button>
        <el-button type="primary" 
        @click="noteAll(mode, pageInfo)"
        :loading="sendLoading"
        >{{$t('common.base.send')}}</el-button
        >
      </span>
    </base-modal>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'; 
import { useStateNoteUserSendMessage } from '@src/modules/dept/mock.ts'
import { debounce } from 'lodash'
export default defineComponent({ 
  name: 'loginUserBan', 
  props:{
    mode:{
      type:String,
      default:''
    },
    pageInfo:{
      type:Object,
      default:()=>({}),
    }
  },
  setup(props) { 
    const { getNowUserCount, loading, totalUser, loginUser, noteAll, sendLoading, showDialog } = useStateNoteUserSendMessage();
    const initData = debounce(function(){
      getNowUserCount(props.mode, props.pageInfo)
    }, 500)

    onMounted(()=>{
      initData()
    })
    return {
      loading,
      getNowUserCount,
      totalUser, 
      loginUser,
      initData,
      showDialog,
      noteAll,
      sendLoading,
    }

  } 
})
</script>

<style lang="scss" scoped>
.login-user-ban-box {
  width: 100%;
  height: 38px;
  background-color: #FCF6EC;
  border: 1px solid #faecd8;
  border-radius: 4px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
</style>

